<template>
  <div class="wholeContainer">
    <div class="leftHeader">
      <div class="logo"></div>
    </div>
    <div id="nav">
      <a href="#" @click="toDesination('homepage')"
        ><li>
          <i class="el-icon-s-data hoverblue"></i>
          首页
        </li></a
      >
      <a href="#" @click="toDesination('staff-list')"
        ><li>
          <i class="el-icon-s-custom hoverblue"></i>
          员工管理
        </li></a
      >
      <a href="#" @click="toSchedule"
        ><li>
          <i class="el-icon-setting hoverblue"></i>
          排班管理
        </li></a
      >
      <a href="#" @click="toDesination('notice-list')"
        ><li>
          <i class="el-icon-bell hoverblue"></i>
          通知管理
        </li></a
      >
      <a href="#" @click="toDesination('application-list')"
        ><li>
          <i class="el-icon-s-claim hoverblue"></i>
          业务管理
        </li></a
      >
      <a href="#" @click="toDesination('scherule')"
        ><li>
          <i class="el-icon-document-copy hoverblue"></i>
          规则管理
        </li></a
      >
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
export default {
  name: "nav",
  computed: {},
  methods: {
    ...mapActions("home", ["changePathName"]),
    ...mapMutations("home", ["CHANGE_PATH_NAME"]),
    toSchedule() {
      this.$router.push({
        name: "schefrom",
      });
    },
    toDesination(desitination) {
      this.changePathName(desitination);
      this.$router.push({
        name: desitination,
      });
    },
  },
};
</script>

<style scoped>
/*左侧头部区域*/
.leftHeader {
  padding: 8px;
  height: 34px;
  background-color: #000000;
  background: url("@/assets/hbyt.png") no-repeat 50%;
  background-size: contain;
}

/* 设置导航栏样式 */
#nav {
  width: 100%;
  height: 50%;
  /* background-color: #fff; */
  overflow-x: hidden;
  /* padding-top: 20px; */
}

/* 设置导航栏链接样式 */
#nav a {
  color: #161830;
  height: 60px;
  display: block;
  padding: 0 40px;
  /* border-right: 3px solid white; */
  font-size: 15px;
  /* font-weight: bold; */
  line-height: 60px;
  text-decoration: none;
}

/* 设置导航栏链接的鼠标悬停效果 */
#nav a:hover {
  color: #0078fc;
  /* color: white; */
  background-color: rgba(31, 163, 244, 0.1);
  border-right: 3px solid #0078fc;
}

.hoverblue:hover {
  color: #0078fc;
}
</style>
